<template>
  <div class="contain">
    <div class="header-tab">
      <h3>订单管理</h3>
      <div class="tab-items">
        <div class="btn" v-for="(item,index) in tabs" :key="item" :class="index==currentTab?'active-tab':''"
             @click="changeTab(index)">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="container">
      <div class="table-item" v-for="(item,index) in orderList" :key="item.id">
          <table border="1">
            <tr>
              <th colspan="7"><span class="date">{{ $util.dateConverter('yyyy年MM月dd日 hh:mm',item.create_date) }}</span> <span
                  class="order-no">订单号：{{ item.id }}</span></th>
              <th><i class="delete-icon" @click="handleCancelOrder(item.id)"></i></th>
            </tr>
            <tr>
              <td class="class-info">
                <img v-for="img in item.picture" :key="img"
                     :src="img" class="class-img" alt="">
<!--                <span class="class-dec">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</span>-->
              </td>
              <td class="class-money">
                <div class="title">售价</div>
                <div class="price">￥{{item.pay_fee}}</div>
              </td>
              <td class="class-count title">*{{item.picture.length}}</td>
              <td class="class-status-money">
                <div class="title">{{ item.pay_status }}</div>
                <div class="price">￥{{ item.pay_fee }}</div>
              </td>
              <td class="class-status title">
                <span>{{ item.status }}</span>
              </td>
              <td class="order-detail btn btn-info" @click="showDetail(index,item.id)">订单详情</td>
              <td class="order-detail btn" colspan="2" v-show="item.status=='已取消'">
                <span class="yellow-status btn" @click="handleJumpBuy()">重新购买</span>
              </td>
              <td class="order-detail" v-show="item.status!='已取消'">
                <span class="btn" v-if="(item.status=='已完成'|| item.status=='已支付')&&item.fapiao_status==1"
                  @click="handleOpenTicket(item)"
                >
                  申请开票
                </span>
                <span v-if="(item.status=='已完成'|| item.status=='已支付'|| item.status=='退款中')&&item.fapiao_status==2">
                  开票等待中
                </span>
                <span v-if="(item.status=='已完成'|| item.status=='已支付'|| item.status=='退款中')&&item.fapiao_status==3">
                  开票成功
                </span>
                <span v-else-if="item.status=='待付款'"
                      class="yellow-status btn"
                      @click="handleGoPay(item)">去付款</span>
              </td>
              <td class="order-detail btn" v-if="item.status=='已完成'|| item.status=='已支付'">
                <span @click="handleRefund(item)">申请退款</span>
              </td>
              <td class="order-operation title btn" v-show="item.status=='待付款'">
                <span @click="handleCancelOrder(item.id)">取消订单</span>
              </td>
              <td class="order-detail btn" v-if="item.status=='退款中'">
                <span>退款申请中</span>
              </td>
            </tr>
          </table>
          <div class="detail-info" v-show="item.open">
            <div class="left-box">
              <h3 class="detail-title">订单详情</h3>
              <div class="order-details">
                <div>订单号：{{ item.id }}</div>
                <div>下单时间：{{$util.dateConverter('yyyy年MM月dd日 hh:mm:ss',item.create_date)}}</div>
                <div v-if="item.detail&&item.detail.payl">
                    付款时间：{{$util.dateConverter('yyyy年MM月dd日 hh:mm:ss',item.detail.payl.payTime)}}
                </div>
              </div>
            </div>
            <div class="right-box">
              <div v-if="item.detail&&item.detail.addr">
                <span class="vertical-top">收货信息：</span>
                <div class="inline-block">
                  <div>{{item.detail.addr.consignee}}</div>
                  <div>{{item.detail.addr.mobile}}</div>
                  <div>{{item.detail.addr.province}}{{item.detail.addr.xianqu}}{{item.detail.addr.city}}{{item.detail.addr.address}}</div>
                </div>
              </div>
              <div v-if="item.wuliu_status != 1">
                <span class="vertical-top">物流信息：</span>
                <div class="inline-block">
                    <div>{{item.kd_name}}</div>
                    <div>{{item.kd_no}}</div>
                </div>
              </div>
              <div v-if="(item.status=='已完成'|| item.status=='已支付')&&item.fapiao_status!==1">
                <span class="vertical-top">开票信息：</span>
                <div class="inline-block">
                  <div>
                    <span class="strong" v-if="item.fapiao_status==2">开票等待中</span>
                    <span class="success" v-if="item.fapiao_status==3">开票成功</span>
                    {{item.fapiao_type}}
                  </div>
                  <div>{{item.fapiao_taitou}}<span v-if="item.nashuiren">（{{item.nashuiren}}）</span></div>
                  <div>{{item.kaihu_bank}} {{item.bank_account}}</div>
                  <div>{{item.danwei_address}}</div>
                </div>
              </div>
              <div>
                <span class="vertical-top">订单状态：</span>
                <span>{{item.status}}</span>
              </div>
            </div>
          </div>
        </div>
      <div class="table-nodata" v-if="orderList&&orderList.length === 0">
        暂无订单
      </div>
    </div>
    <a-modal
        title="是否确认取消订单"
          :visible="confirmCancelOrder"
            @ok="requestCancelOrder"
            @cancel="handleCancel"
    >
      <p>是否确认取消该订单？</p>
    </a-modal>
    <transition name="popup">
    <div class="popup" v-if="ticketStatus">
      <div class="body">
        <div class="close" @click="handleCloseTicket"></div>
        <div class="title">
          开票信息
        </div>
        <div class="popup-contain" v-if="activeOrder">
          <ticketAdd :order="activeOrder" @submit="handleSubmitTicket"></ticketAdd>
        </div>
      </div>
    </div>
    </transition>
    <transition name="popup">
    <div class="popup" v-if="refundStatus">
      <div class="body">
        <div class="close" @click="handleCloseRefund"></div>
        <div class="title">
          退款信息
        </div>
        <div class="popup-contain" v-if="activeOrder">
          <refundOrder :order="activeOrder" @submit="handleSubmitRefund"></refundOrder>
        </div>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import ticketAdd from '../comp/ticketAdd.vue'
import refundOrder from '../comp/refundOrder.vue'
export default {
  name: 'order',
  components: {
      ticketAdd,
      refundOrder
  },
  data() {
    return {
      activeKey: ['1'],
      currentTab: 0,
      tabs: ['全部订单', '待付款', '已付款', '已取消'],
      orderList: null,
      cancelId: null,
      confirmCancelOrder: false,
      ticketStatus: false,
      refundStatus: false,
      activeOrder: null
    }
  },
  watch: {
      // eslint-disable-next-line no-unused-vars
      currentTab(val) {
         this.getLists();
      }
  },
  mounted() {
    this.getLists()
  },
  methods: {
    changeTab(index) {
      this.currentTab = index;
    },
    // 获取订单列表
    getLists() {
      let pathList= ['getOrderList','doGetDzfOrder','doGetYzfOrder','doGetYqxOrder'];
      let option = {
        pathName: pathList[this.currentTab],
        authorization: true,
      };
      this.$api.ajaxData(option).then(res => {
        let list = [];
        res.obj.forEach(item=>{
          let picture = item.pic.split(',');
          list.push(Object.assign({
              open: false,
              picture: picture
          },item))
        });
        list.sort((a,b) =>{
            return new Date(b.create_date).getTime() - new Date(a.create_date).getTime()
        });
        this.orderList = list;
      });
    },
    //展开详情
    showDetail(index, id){
      if(this.orderList[index].detail) {
          this.$set(this.orderList, index, Object.assign(this.orderList[index], {
              open: !this.orderList[index].open
          }));
          return;
      }
      let option = {
        pathName: 'getOrderListDetail',
        authorization: true,
        params: {
          oid: id
        },
        method: 'get'
      };
      this.$api.ajaxData(option).then(res => {
          let temp = Object.assign(this.orderList[index],{
              open: true,
              detail: res.obj
          });
        this.$set(this.orderList, index, temp);
      })
    },
    //取消订单
    handleCancelOrder(id) {
      this.cancelId = id;
      this.confirmCancelOrder = true;
    },
    handleCancel() {
      this.cancelId = null;
      this.confirmCancelOrder = false;
    },
      // 取消订单
    requestCancelOrder(){
      let option = {
          pathName: 'doCancelOrder',
          authorization: true,
          params: {
              order_id: this.cancelId
          }
      };
        // eslint-disable-next-line no-unused-vars
      this.$api.ajaxData(option).then(res => {
          this.confirmCancelOrder = false;
          this.$notification.open({
              message: '信息提示',
              description: '订单取消成功'
          });
          this.getLists();
      })
    },
    // 去付款
    handleGoPay(item) {
      let routeData = this.$router.resolve({name:'order',query: {
          orderId: item.id,
          price: Number(item.pay_fee) * 100,
          desc: '待付款订单，共'+item.picture.length + '件商品'
      }});
      window.open(routeData.href, '_blank');
    },
    // 开票
    handleOpenTicket(order) {
      this.activeOrder = order;
      this.ticketStatus = true;
    },
    handleCloseTicket() {
      this.activeOrder = null;
      this.ticketStatus = false;
    },
    handleSubmitTicket() {
      this.handleCloseTicket();
      this.getLists();
    },
    // 重新购买
    handleJumpBuy() {
      this.$router.push({
          name: 'courseCenter'
      })
    },
    // 申请退款
    handleRefund(order) {
        this.activeOrder = order;
        this.refundStatus = true;
    },
    handleCloseRefund() {
        this.activeOrder = null;
        this.refundStatus = false;
    },
    handleSubmitRefund() {
        this.handleCloseRefund();
        this.getLists();
    },
  }
}
</script>

<style lang="scss" scoped>
.contain {
  background: #fff;
  border: 1px solid #f7f7f7;
  .header-tab {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;

    .tab-items {
      position: relative;
      display: flex;
      margin-left: 40px;

      & > div {
        padding: 10px;
        border-bottom: 2px solid #fff;
        margin-right: 20px;
      }

      .active-tab {
        color: #2E6FC5;
        border-bottom: 2px solid #2E6FC5;

      }

    }


  }

  .container {
    padding-top: 20px;

    .table-item {
      margin-bottom: 20px;
      padding: 0 20px;
      .delete-icon {
        display: inline-block;
        width: 17px;
        height: 20px;
        background: url(../../../assets/image/icon/delete.png) no-repeat;
        background-size: contain;
        cursor: pointer;
      }

      .date {
        margin-right: 40px;
        color: #000;
        font-size: 12px;
      }

      .order-no {
        color: #333333;
        margin-right: 40px;
        font-weight: normal;
      }

      table {
        border-width: 0;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        color: #999999;
        font-size: 13px;

        th {
          background: #F8F8F8;
          border: none;
          border-right: 1px solid #fff;
          padding: 10px;

        }

        th:first-child {
          text-align: left;

        }

        th:last-child {
          text-align: right;
        }

        td {
          border: 1px solid #f8f8f8;
          padding: 10px;
        }

        .class-info {
          //display: flex;
          //justify-content: flex-start;
          img {
            margin-bottom: 10px;
          }
          .class-dec {
            //max-width: 300px;
            text-align: left;
            padding: 0 20px;
            color: #999999;
            font-size: 13px;
          }
        }


        .yellow-status {
          color: #ff9900;
          font-size: 14px;
        }

        .class-img {
          width: 99px;
          height: 57px;
        }
      }

      .detail-info {
        margin: 0 auto;
        padding: 20px;
        display: flex;
        color: #666666;
        font-size: 13px;
        vertical-align: top;
          border: 1px solid #f7f7f7;
          border-top: none;
        .left-box {
          flex-basis: 50%;
          position: relative;
            border-right: 1px solid #f7f7f7;
        }

        .right-box {
          padding-left: 20px;
          padding-top: 20px;
            font-size: 13px;
        }

        .detail-title {
            line-height: 30px;
            color: #333;
            font-weight: bold;
          margin-bottom: 10px;
        }

        .order-details>div{
          line-height: 28px;
            color: #666;
        }
      }

    }

    .title {
      color: #999999;
      font-size: 13px;
    }

  }
}
.inline-block {
  display: inline-block;
  margin-bottom: 20px;
  .strong {
    color: #333;
    font-weight: bold;
  }
  .success {
    color: #2c8418;
    font-weight: bold;
  }
}
.vertical-top {
  vertical-align: top;
}
.btn {
cursor: pointer;
}
.price {
    font-size: 15px;
    color: #333;
}
.btn-info {
    color: #006ade;
}
  .table-nodata {
    padding: 60px 0;
    font-size: 15px;
    text-align: center;
  }
.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  .body {
    position: relative;
    .close {
      position: absolute;
      top: 21px;
      right: 30px;
      width: 22px;
      height: 22px;
      background: url("../../../assets/image/icon/u2148.png") no-repeat;
      background-size: cover;
    }
    .title {
      display: flex;
      width: 890px;
      height: 64px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background: #006ade;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      align-items: center;
      text-align: center;
      justify-content: center;
    }
    .popup-contain {
      overflow: auto;
      background: #fff;
      font-size: 13px;
      color: #333;
      ul,li,p {
        margin: 0;
      }
      .course-page {
        border-bottom: 1px solid #f7f7f7;
        .page {
          display: flex;
          height: 50px;
          padding: 0 20px;
          align-items: center;
          .fold-arrow {
            @include triangle(12px, #ccc, right);
            cursor: pointer;
            transition-duration: 200ms;
            &.active {
              transform: rotate(90deg);
            }
          }
          .page-name {
            flex: 1;
            margin: 0 10px;
          }
          .progress-box {
            display: flex;
            width: 300px;
            align-items: center;
            span {
              margin: 0 0 0 10px;
              color: #a1a1a1;
            }
          }
        }
        .page-item-list {
          li {
            display: flex;
            align-items: center;
            height: 50px;
            padding: 0 40px;
            border-top: 1px solid #f7f7f7;
            .item-name {
              flex: 1;
            }
            .progress-box {
              display: flex;
              align-items: center;
              width: 300px;
              span {
                margin: 0 0 0 10px;
                color: #a1a1a1;
              }
            }
            .icon-video {
              display: block;
              width: 15px;
              height: 15px;
              margin-left: 15px;
              background: url("../../../assets/image/icon/u2129.png") no-repeat;
              background-size: cover;
            }
          }
        }
      }
    }
  }
}
</style>
